<template>
    <div class="pre-order">
        <h1 class="confirm-title">确认订单</h1>
		<el-table :data="currentProduct" style="width: 100%">
			<el-table-column align="center" label="充值产品">
				<template v-slot="{ row }">
					<img style="vertical-align: middle" width="40%"
                     :src="row.imageUrl" alt="" />
					&nbsp;
					<span style="color: #f4c14f; font-weight: bolder">
                        {{ row.productName }}</span>
					<br />
					<span>{{ row.description }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="price" label="单价">
				<template v-slot="{ row }">
					<span class="price">
						{{ row.price }}
					</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="address" label="数量">
				<!--计数器的 坑 -->
				<template v-slot="{ row }">
					<el-input-number v-model="quantity" size="mini" :min="1" :max="100000" label="描述文字">
					</el-input-number>
				</template>

			</el-table-column>
			<el-table-column align="center" prop="address" label="小计">

				<template>
					<span class="total_fee">{{ total_fee }}</span>
				</template>

			</el-table-column>
		</el-table>
		<div class="total-fee">
			<div class="box-wrap">
				<div class="box-shadow">
					<span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
					<span class="realpay--price-symbol">¥</span>
					<span class="realpay--price" style="color: rgb(255, 80, 0)">{{ total_fee }}</span>
					<div class="order-confirmAddr">
						<div class="confirmAddr-addr-user">
							<span class="confirmAddr-title">充值详情：</span><span
								class="confirmAddr-pro">尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有</span>
						</div>
						<div class="confirmAddr-addr">
							<span class="confirmAddr-title">充值账户：</span>
                            <span class="confirmAddr-usn">
                                {{userInfo.username}}
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="btn">
				<el-button @click="commitOrder" type="danger">提交订单</el-button>
			</div>
		</div>
	</div>
</template>

<script>
    import * as api from '@/api/transaction'
    export default{
        created () {
            //获取query参数
            console.log(this.$route);
            let {product_id} = this.$route.query
            this.product_id = product_id
            api.getProductDetailApi(product_id)
            .then(res => {
                // console.log(res);
                this.currentProduct = res.data.data
            })
        },
        computed: {
            total_fee(){
                return (this.quantity * this.currentProduct[0]?.price).toFixed(2)
            }
        },
        data () {
            return {
                product_id: "",
                userInfo: {},
                quantity: 1, //数量
                currentProduct: [],
                //total_fee: "0.00", //总价格
            }
        },
        methods: {
            commitOrder(){
                //提交订单方法
                this.$confirm('您是否确认购买'+this.currentProduct[0].productName+'商品总价格为:'+this.total_fee,'确认订单',{
                    confirmButtonText: '确定下单',
					cancelButtonText: '取消',
                    type:'info',
                })
                .then(()=>{
                    //调用下单接口
                    api.preOrderApi(this.product_id,this.quantity)
                    .then(res => {
                        console.log(res);
                        if (res.data.state) {
                            //下单成功 获取订单id
                            let {order_id} = res.data
                            //跳转到支付页面,携带订单号
                            this.$router.push({name:"home-payment-pay",query:{ order_id }})
                        }
                    })

                })
                .catch(()=>{
                    this.$message.error('已取消下单')
                })
            }
        }
    }

</script>

<style lang="less" scoped>
.price {
	color: #ff0036;
	font-weight: bolder;
}

.total_fee {
	font-size: 16px;
	color: #ff0036;
}
.el-button {
	width: 180px;
	border-radius: 0;
}

.confirm-title {
	text-align: left;
	margin-bottom: 30px;
}

.pre-order {
	padding: 80px 100px 0 100px;
}

.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;

	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
    }
    .realpay--title {
			font-weight: 700;
			color: #333;
	}
    .realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
	}
    .realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
	}

    .order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;

            .confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}

            .confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
    }
}


</style>